@{
    ViewData["Title"] = "API 文档 - 工作任务状态变更";
}

<div class="d-flex align-items-center mb-4">
    <h2 class="mb-0">@ViewData["Title"]</h2>
    <span class="badge bg-primary ms-3">v1.0</span>
</div>

<div class="alert alert-info d-flex align-items-center">
    <i class="bi bi-info-circle-fill me-2"></i>
    <div>本文档描述了用于处理工作任务状态变更的 API 端点，并提供了一个模拟调用此 API 的功能。</div>
</div>

<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <i class="bi bi-terminal me-2"></i>API 端点信息
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <tbody>
                    <tr>
                        <th class="w-25">HTTP 方法</th>
                        <td><span class="badge bg-success">POST</span></td>
                    </tr>
                    <tr>
                        <th>URL</th>
                        <td><code>/api/worktask/state-change</code></td>
                    </tr>
                    <tr>
                        <th>描述</th>
                        <td>处理工作任务的状态变更事件。此接口会记录任务实体的新状态，通常由工作流引擎在任务状态转换时调用。</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <i class="bi bi-shield-lock me-2"></i>认证
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <tbody>
                    <tr>
                        <th class="w-25">类型</th>
                        <td>查询参数 (Query Parameter)</td>
                    </tr>
                    <tr>
                        <th>参数名称</th>
                        <td><code>key</code></td>
                    </tr>
                    <tr>
                        <th>类型</th>
                        <td><code>string</code></td>
                    </tr>
                    <tr>
                        <th>是否必需</th>
                        <td><span class="badge bg-danger">是</span></td>
                    </tr>
                    <tr>
                        <th>描述</th>
                        <td>API 的认证密钥。出于测试目的，请使用静态密钥: <code class="text-danger">WF_2025_SECRET</code></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <i class="bi bi-input-cursor-text me-2"></i>请求参数
    </div>
    <div class="card-body">
        <h5 class="mb-3">查询参数</h5>
        <div class="table-responsive mb-4">
            <table class="table table-bordered table-hover">
                <thead class="table-light">
                    <tr>
                        <th>参数</th>
                        <th>类型</th>
                        <th>是否必需</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>key</code></td>
                        <td><code>string</code></td>
                        <td><span class="badge bg-danger">是</span></td>
                        <td>认证密钥</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <h5 class="mb-3">请求体 (JSON)</h5>
        <div class="alert alert-secondary mb-3">
            <p class="mb-1">请求体应为一个 <code>TaskStateChangeEventData</code> 类型的 JSON 对象。</p>
        </div>

        <div class="mb-4">
            <h6 class="mb-2">JSON 结构</h6>
            <pre><code class="language-json">{
  "workTask": {
    "entityFullName": "string (可选)",
    "entityKeyValue": "string | number (可选)"
  },
  "newWorkTaskStatus": "integer (必需)"
}</code></pre>
        </div>

        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="table-light">
                    <tr>
                        <th>字段</th>
                        <th>类型</th>
                        <th>是否必需</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>workTask</code></td>
                        <td><code>object</code></td>
                        <td><span class="badge bg-secondary">可选</span></td>
                        <td>包含状态发生变化的工作任务的详细信息</td>
                    </tr>
                    <tr>
                        <td class="ps-4"><code>entityFullName</code></td>
                        <td><code>string</code></td>
                        <td><span class="badge bg-secondary">可选</span></td>
                        <td>与任务关联的实体的完全限定名称 (例如："MyApplication.Models.Order")</td>
                    </tr>
                    <tr>
                        <td class="ps-4"><code>entityKeyValue</code></td>
                        <td><code>string | number</code></td>
                        <td><span class="badge bg-secondary">可选</span></td>
                        <td>实体的主键值</td>
                    </tr>
                    <tr>
                        <td><code>newWorkTaskStatus</code></td>
                        <td><code>integer</code></td>
                        <td><span class="badge bg-danger">必需</span></td>
                        <td>工作任务的新状态。其值对应于 <code>WorkFlowCore.WorkTasks.WorkTaskStatus</code> 枚举</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <i class="bi bi-code-square me-2"></i>示例请求
    </div>
    <div class="card-body">
        <div class="mb-3">
            <h5 class="mb-2">URL</h5>
            <div class="input-group">
                <span class="input-group-text bg-light">POST</span>
                <input type="text" class="form-control" value="/api/worktask/state-change?key=WF_2025_SECRET" readonly>
            </div>
        </div>

        <div>
            <h5 class="mb-2">请求体 (JSON)</h5>
            <pre><code class="language-json">{
  "workTask": {
    "entityFullName": "Sample.Business.Order",
    "entityKeyValue": "ORD12345"
  },
  "newWorkTaskStatus": 2
}</code></pre>
            <p class="text-muted mt-2">(假设 <code>2</code> 代表 '已完成')</p>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <i class="bi bi-arrow-return-right me-2"></i>可能的响应
    </div>
    <div class="card-body">
        <div class="mb-4">
            <h5 class="mb-3">
                <span class="badge bg-success me-2">200</span>成功响应
            </h5>
            <pre><code class="language-json">{
  "stateId": 101 // 示例 ID
}</code></pre>
            <div class="alert alert-success mt-2">
                <strong>描述:</strong> 状态变更已成功处理并记录。<code>stateId</code> 是新创建的 <code>WorkTaskStateInfo</code> 记录的 ID。
            </div>
        </div>

        <div>
            <h5 class="mb-3">
                <span class="badge bg-danger me-2">401</span>错误响应
            </h5>
            <pre><code class="language-json">{
  "message": "无效的认证密钥"
}</code></pre>
            <div class="alert alert-danger mt-2">
                <strong>描述:</strong> 提供的认证密钥 (<code>key</code> 参数) 无效或缺失。
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <i class="bi bi-gear me-2"></i>工作原理
    </div>
    <div class="card-body">
        <div class="mb-4">
            <h5 class="card-title">插件扩展机制</h5>
            <p>系统通过 <code>CustomTaskStateChangeEventEventHandlerExtension</code> 插件扩展了任务状态变更事件的处理能力。</p>
            
            <div class="alert alert-secondary mb-3">
                <h6 class="alert-heading">插件配置参数</h6>
                <ul class="mb-0">
                    <li><code>url</code> - 接收状态变更通知的HTTP端点URL (必需)</li>
                    <li><strong>配置示例:</strong> <code>CustomTaskStateChangeEventEventHandlerExtension?url=https://example.com/api/state-change</code></li>
                    <li><strong>数据格式:</strong> POST请求发送完整的TaskStateChangeEventData JSON对象</li>
                    <li><strong>错误处理:</strong> 如果目标URL不可达，错误会被捕获并记录到日志，不会影响主流程执行</li>
                    <li><strong>认证方式:</strong> 需要在目标URL端自行实现认证机制</li>
                    <li><strong>重试机制:</strong> 当前版本不自动重试失败请求</li>
                </ul>
            </div>

            <div class="mb-4">
                <h6 class="mb-3">事件处理流程</h6>
                <div class="ps-3">
                    <ol class="mb-0">
                        <li>工作流引擎触发任务状态变更</li>
                        <li>API接口 <code>/api/worktask/state-change</code> 被调用</li>
                        <li>API处理请求并保存状态变更记录到数据库</li>
                        <li>插件 <code>CustomTaskStateChangeEventEventHandlerExtension</code> 被触发</li>
                        <li>插件将完整的状态变更事件数据发送到配置的URL</li>
                    </ol>
                </div>
            </div>

            <div class="mb-3">
                <h6 class="mb-2">发送的数据格式</h6>
                <pre><code class="language-json">{
  "WorkTask": { /* 当前流程实例数据 */ },
  "OldWorkTaskStatus": 0, /* 旧状态值 */
  "NewWorkTaskStatus": 1  /* 新状态值 */
}</code></pre>
            </div>

            <div class="alert alert-info">
                <i class="bi bi-info-circle me-2"></i>
                <strong>注意：</strong> 插件会自动处理HTTP请求发送，如果目标URL不可达，错误会被捕获并记录到日志，不会影响主流程执行。
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <i class="bi bi-send me-2"></i>API 模拟调用
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">模拟请求</h5>
                    </div>
                    <div class="card-body">
                        <form id="apiSimForm">
                            <div class="mb-3">
                                <label for="authKey" class="form-label">认证密钥 (Auth Key - <code>key</code>)</label>
                                <input type="text" class="form-control" id="authKey" value="WF_2025_SECRET" required>
                            </div>

                            <div class="mb-3">
                                <label for="newWorkTaskStatusHelper" class="form-label">新工作任务状态</label>
                                <select class="form-select" id="newWorkTaskStatusHelper">
                                    <option value="0">0: 待处理 (Pending)</option>
                                    <option value="1">1: 处理中 (Processing)</option>
                                    <option value="2" selected>2: 已完成 (Processed)</option>
                                    <option value="3">3: 撤销 (Canceled)</option>
                                    <option value="4">4: 已驳回 (Rejected)</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="requestBody" class="form-label">请求体 (JSON)</label>
                                <textarea class="form-control" id="requestBody" rows="8" required>
{
  "workTask": {
    "entityFullName": "Sample.Business.Order",
    "entityKeyValue": "ORD12345"
  },
  "newWorkTaskStatus": 2
}
                                </textarea>
                            </div>

                            <button type="submit" class="btn btn-primary w-100">
                                <i class="bi bi-send-fill me-2"></i>发送 API 请求
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">API 响应</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">状态码:</label>
                            <div class="alert alert-light">
                                <code id="responseStatus">---</code>
                            </div>
                        </div>
                        <div>
                            <label class="form-label">响应内容:</label>
                            <pre class="bg-light p-3 rounded"><code id="responseBody" class="language-json">---</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function () {
            // Function to update the newWorkTaskStatus in the JSON body
            function updateJsonBodyStatus() {
                var statusValue = parseInt($('#newWorkTaskStatusHelper').val());
                try {
                    var jsonBody = JSON.parse($('#requestBody').val());
                    jsonBody.newWorkTaskStatus = statusValue;
                    $('#requestBody').val(JSON.stringify(jsonBody, null, 2));
                } catch (e) {
                    console.error("Error parsing or updating JSON body: ", e);
                    // Optionally, notify the user of the error
                }
            }

            // Initialize body with selected status
            updateJsonBodyStatus();

            // Event listener for the status helper dropdown
            $('#newWorkTaskStatusHelper').change(function () {
                updateJsonBodyStatus();
            });

            // Event listener for form submission
            $('#apiSimForm').submit(function (event) {
                event.preventDefault(); // Prevent default form submission

                var authKey = $('#authKey').val();
                var requestBodyText = $('#requestBody').val();
                var requestBodyJson;

                try {
                    requestBodyJson = JSON.parse(requestBodyText);
                } catch (e) {
                    $('#responseStatus').text('错误');
                    $('#responseBody').text('请求体 JSON 格式错误: ' + e.message);
                    return;
                }
                
                var apiUrl = '/api/worktask/state-change?key=' + encodeURIComponent(authKey);

                $('#responseStatus').text('发送中...');
                $('#responseBody').text('---');

                $.ajax({
                    url: apiUrl,
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(requestBodyJson),
                    success: function (data, textStatus, jqXHR) {
                        $('#responseStatus').text(jqXHR.status + ' ' + jqXHR.statusText);
                        $('#responseBody').text(JSON.stringify(data, null, 2));
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $('#responseStatus').text(jqXHR.status + ' ' + jqXHR.statusText);
                        var responseText = jqXHR.responseText;
                        try {
                            // Try to parse as JSON for better display
                            var errorJson = JSON.parse(responseText);
                            $('#responseBody').text(JSON.stringify(errorJson, null, 2));
                        } catch (e) {
                            $('#responseBody').text(responseText);
                        }
                    }
                });
            });
        });
    </script>
}
